// 1. 引入所需模块
const http = require('http'); // Node.js内置HTTP模块（创建服务）
const axios = require('axios'); // 发请求爬取数据
const cheerio = require('cheerio'); // 解析HTML（类似jQuery）

// 2. 爬虫函数：获取猫眼电影数据
async function getMovieData() {
  try {
    // 发起请求（设置User-Agent避免猫眼反爬，否则会返回403）
    const response = await axios.get('https://maoyan.com/films', {
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36'
      }
    });

    const html = response.data; // 获取页面HTML
    const $ = cheerio.load(html); // 加载HTML到cheerio
    const movies = []; // 存储电影数据的数组

    // 3. 解析HTML（需根据猫眼实际DOM结构调整选择器，此处为通用示例）
    // 猫眼电影列表项通常在 ".film-item" 或 ".movie-item" 类下，需实际检查
    $('.film-item').each((index, element) => {
      const movieId = $(element).attr('data-film-id'); // 电影ID（从属性获取）
      const movieName = $(element).find('.film-name').text().trim(); // 电影名称
      const movieScore = $(element).find('.score').text().trim() || '暂无评分'; // 评分（无评分时显示默认值）

      // 过滤空数据，添加到数组
      if (movieId && movieName) {
        movies.push({
          movieId,
          movieName,
          movieScore
        });
      }
    });

    return movies; // 返回爬取的电影数据
  } catch (error) {
    console.error('爬取数据失败：', error.message);
    return []; // 失败时返回空数组
  }
}

// 4. 创建HTTP服务，监听8081端口
const server = http.createServer(async (req, res) => {
  // 仅处理根路径（http://localhost:8081/）的请求
  if (req.url === '/' && req.method === 'GET') {
    const movieData = await getMovieData(); // 调用爬虫函数获取数据

    // 5. 动态生成HTML页面（带表格样式，展示电影数据）
    const html = `
      <!DOCTYPE html>
      <html lang="zh-CN">
      <head>
        <meta charset="UTF-8">
        <title>猫眼电影列表</title>
        <style>
          /* 简单样式：表格居中、边框、hover效果 */
          body { font-family: Arial, sans-serif; margin: 20px; }
          h1 { text-align: center; color: #333; }
          table { width: 80%; margin: 0 auto; border-collapse: collapse; }
          th, td { border: 1px solid #ddd; padding: 12px; text-align: center; }
          th { background-color: #f5f5f5; color: #333; }
          tr:hover { background-color: #f9f9f9; }
        </style>
      </head>
      <body>
        <h1>猫眼电影数据</h1>
        <table>
          <tr>
            <th>电影ID</th>
            <th>电影名称</th>
            <th>电影评分</th>
          </tr>
          <!-- 循环渲染电影数据 -->
          ${movieData.map(movie => `
            <tr>
              <td>${movie.movieId}</td>
              <td>${movie.movieName}</td>
              <td>${movie.movieScore}</td>
            </tr>
          `).join('')}
        </table>
      </body>
      </html>
    `;

    // 6. 响应客户端：设置HTTP头（200表示成功，Content-Type为HTML）
    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
    res.end(html); // 发送HTML内容
  } else {
    // 处理非根路径请求（返回404）
    res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
    res.end('页面不存在');
  }
});

// 7. 启动服务，监听8081端口
server.listen(8081, () => {
  console.log('服务已启动：http://localhost:8081');
});